<template>
    <div>
      <search
        @result-click="resultClick"
        @on-change="getResult"
        :results="results"
        v-model="value"
        position="absolute"
        auto-scroll-to-top top="46px"
        @on-focus="onFocus"
        @on-cancel="onCancel"
        @on-submit="onSubmit"
        ref="search">

      </search>
    </div>
  </template>

  <script>
    import { Search} from 'vux'

    export default {
      components: {
        Search,
      },
      methods: {
        setFocus () {
          this.$refs.search.setFocus()
        },
        resultClick (item) {
          window.alert('you click the result item: ' + JSON.stringify(item))
        },
        getResult (val) {
          this.results = val ? getResult(this.value) : []
        },
        onSubmit () {
          this.$refs.search.setBlur()
          this.$vux.toast.show({
            type: 'text',
            position: 'top',
            text: 'on submit'
          })
        },
        onFocus () {
          console.log('on focus')
        },
        onCancel () {
          console.log('on cancel')
        }
      },
      data () {
        return {
          results: [],
          value: 'test'
        }
      }
    }

    function getResult (val) {
      let rs = []
      for (let i = 0; i < 20; i++) {
        rs.push({
          title: `${val} result: ${i + 1} `,
          other: i
        })
      }
      return rs
    }
  </script>
  <style>
    .weui-search-bar__label {
      position: absolute;
      top: 1px;
      right: 1px;
      bottom: 1px;
      left: 1px;
      z-index: 2;
      border-radius: 50px;
      text-align: center;
      color: #9B9B9B;
      background: #FFFFFF;
    }
  </style>


